<template>
  <div class="YI">
    <div class="bk">
        <el-input
        type="text"
        placeholder="请输入内容"
        v-model="val"
        maxlength="20"
        show-word-limit
        @keyup.native="post"
        ></el-input>
        <p>说出你的十年生死,它会随机的展示在页面底部</p>
        <p>按下回车提交</p>
    </div>
  </div>
</template>

<script>
export default {
    name:'YI',
    data() {
      return {
        val:'',
      };
    },
    methods: {
      post(event) {
        if(event.keyCode == 13){
          this.$store.dispatch('personalCenter/reqYI', this.val).then((result)=>{
            if(result.data.status === '200'){
              this.$message({
                message: '成功',
                type: 'success'
              });
            }else{
              this.$message({
                message: '错误',
                type: 'error'
              });
            }
          });
        }
      },
    },
}
</script>

<style lang="less">
  .YI{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:100px ;
      .bk{
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      width: 80%;
      .el-input{
        width: 100%;
      }
      p{
        margin: 10px 0;
        font-family: 'FZZYJT';
        user-select: none;
        color: rgb(119, 116, 116);
      }
    }
  }

</style>